<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page"></c:set>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>${product.feature}</title>
    <link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/>
    <!-- 页面整体布局样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css"/>
    <!-- 菜单样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen"/>
    <!-- 焦点图样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css"/>
    <script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript"
            src="${ctx}/js/jquery.nivo.slider.pack.js"></script>
    <!-- 焦点图JS脚本定义 -->
    <script type="text/javascript">
        function showUserName() {
            var name = "${user.username}";
            if (name != "") {
                $("#login").html(name); //把登录换成用户名
                $("#exitP").show(); //.show()方法是显示，.hidden()方法是隐藏
                $("#login").attr("href",
                    "${ctx}/UserServlet?flag=info&userId=${user.userid}");
            } else {
                $("#exitp").hidden();
            }
        }
    </script>
    <style type="text/css">
        .kuan {
            width: 65px;
        }

        .xia {
            position: absolute;
            left;
            0;
            bottom: 0;
            margin-bottom: 20px;
            margin-left: 8%;
        }

        .zhong {
            text-align: center;
        }

        .zuo {
            margin-left: 80px;
        }
    </style>
    <!-- 焦点图JS脚本定义 -->
</head>

<body>
<div id="templatemo_body_wrapper">
    <div id="templatemo_wrapper">
        <!-- header -->
        <div id="templatemo_header">
            <div id="site_title">
                <h1>
                    <a href="#">穿美在线鞋城</a>
                </h1>
            </div>
            <div id="header_right">
                <p>
                    <a href="${ctx}/UserServlet?flag=login" id="login" target="_blank">登陆</a>&nbsp;
                    <span id="exitP" style="display: none"><a
                            href="${ctx}/UserServlet?flag=logout" id="exit" target="_blank">注销</a></span>
                </p>
            </div>
            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_header -->
        <!-- menu -->
        <div id="templatemo_menubar">
            <div id="top_nav" class="ddsmoothmenu">
                <ul>
                    <li><a href="${ctx}/home" >首页</a></li>
                    <li><a href="${ctx}/pro?flag=product" class="selected">产品</a></li>
                    <li><a href="${ctx}/ShoppingCartServlet">我的购物车</a></li>
                    <li><a href="${ctx}/OrderServlet?flag=qoi">我的订单</a></li>
                </ul>
                <br style="clear: left"/>
            </div>
            <!-- end of ddsmoothmenu -->
        </div>
        <!-- END of templatemo_menubar -->

        <!-- main -->
        <div id="templatemo_main">
            <!-- 侧边栏 -->
            <div id="sidebar" class="float_l">
                <!-- sidebar 1 -->
                <div class="sidebar_box">
                    <span class="bottom"></span>
                    <h3>品牌</h3>
                    <c:forEach items="${brand}" var="bra">
                        <div class="content">
                            <ul class="sidebar_list">
                                <li><a href="pro?flag=brand&&category_id=${bra.category_id}"><c:out
                                        value="${bra.name}"/></a></li>
                            </ul>
                        </div>
                    </c:forEach>
                </div>
                <!-- sidebar 2 -->
                <div class="sidebar_box">
                    <span class="bottom"></span>
                    <h3>热卖单品</h3>
                    <c:forEach items="${hot}" var="hot">
                        <div class="content">
                            <div class="bs_box">
                                <a
                                        href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}"><img
                                        src="${ctx}/${hot.imgpath}" alt="image"
                                        style="width: 96px; height: 96px"/></a>
                                <h4>
                                    <br/> <a
                                        href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}">${hot.feature}</a>
                                </h4>
                                <br/>
                                <p class="price">${hot.price}.00￥</p>
                                <div class="cleaner"></div>
                            </div>
                        </div>
                    </c:forEach>

                </div>
            </div>
            <!-- END of sidebar -->

            <!-- 内容展示区 -->
            <div id="content" class="float_r">
                <div class="page-header">
                    <h3>
                        <b>商品详情</b>
                        <small></small>
                    </h3>
                </div>
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <img src="${ctx}/${product.imgpath}" style="width: 400px"/>
                    </div>
                    <div class="col-md-1"></div>
                </div>

                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-8">

                        <table class="table table-hover zuo">
                            <tr>
                                <th colspan="2">${product.feature}</th>
                            </tr>
                            <tr>
                                <td>单价</td>
                                <td>${product.price}</td>
                            </tr>
                            <tr>
                                <td>库存</td>
                                <td>${stock}</td>
                            </tr>
                            <tr>
                                <td>型号</td>
                                <td>${product.model}</td>
                            </tr>
                            <tr>
                                <td>销量</td>
                                <td>${qu}</td>
                            </tr>
                            <form action="${ctx}/ShoppingCartServlet" method="post">
                                <tr>

                                    <td><input type="hidden" name="product_id"
                                               value="${product.product_id}"> <input type="text"
                                                                                     class="form-control kuan"
                                                                                     placeholder=" 数量" name="num"></td>
                                    <td><input type="submit" class="btn btn-default"
                                               value="添加购物车"/></td>
                                    <input type="hidden" name="flag" value="insert"/>
                                    <input type="hidden" name="product_id" value="${product.product_id}"/>

                                </tr>
                            </form>
                        </table>

                    </div>

                </div>
                <br/>
                <div class="page-header">
                    <h3>
                        <b>最近浏览</b>
                        <%--<small>其实是销量前三</small>--%>
                    </h3>
                </div>

                <c:forEach items="${brow}" var="brow">
                    <div class="product_box">
                        <a href="${ctx}/pro?flag=detailed&&product_id=${brow.product_id}"><img
                                src="${ctx}/${brow.imgpath}" alt="Shoes 2" style="width: 160px"/></a>
                        <p>${brow.feature}</p>
                        <p class="product_price">${brow.price}.00￥</p>
                        <!--这是id~${list.product_id}-->
                        <a href="${ctx}/ShoppingCartServlet?flag=insert&product_id=${brow.product_id}"
                           class="addtocart"></a> <a
                            href="${ctx}/pro?flag=detailed&&product_id=${brow.product_id}"
                            class="detail"></a> <input type="hidden" name="flag" value="ls"/>
                    </div>
                </c:forEach>

            </div>

            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_main -->

        <!-- footer -->
        <div id="templatemo_footer">
            <p>
                <a href="${ctx}/pro">首页</a>&nbsp;&nbsp;&nbsp;
                <a href="${ctx}/pro?flag=product">产品</a>&nbsp;&nbsp;&nbsp;
                <a href="${ctx}/ShoppingCartServlet">我的购物车</a>&nbsp;&nbsp;&nbsp;
                <a href="${ctx}/OrderServlet?flag=qoi">我的订单</a>
            </p>
            版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
        </div>
        <!-- END of templatemo_footer -->

    </div>
    <!-- END of templatemo_wrapper -->
</div>
<!-- END of templatemo_body_wrapper -->

<script type="text/javascript">
    $(function () {
        $('#slider').nivoSlider();
    });
</script>
<script type="text/javascript">
    $(function () {
        showUserName();
    });
</script>

</body>

</html>